<template>
  <div class="header">
    <div class="partone">
      <el-row>
        <el-col :span="8" :offset="2">
          <img src="../../assets/home/logo.png" height="110px" alt="" />
        </el-col>
        <el-col :span="4">
          <div
            style="
              line-height: 115px;
              font-size: 60px;
              font-family: KaiTi;
              font-weight: bold;
            "
          >
            理学院
          </div>
        </el-col>
        <el-col :span="4">
          <div style="line-height: 115px">
            <el-input v-model="query" placeholder="请输入内容"></el-input>
          </div>
        </el-col>
        <el-col :span="6">
          <div style="line-height: 115px; float: left">
            <!-- <button style="background-image:url('@/assets/home/search.png');">查找 <img src="@/assets/home/search.png" style=" vertical-align: middle;" height="30px" width="30px"></button> -->
            <!-- <input width="30" height="29" class="button" type="image" src="../../assets/home/search.png" value="搜 索" style="outline: none;"> -->
            <button
              @click="searchList"
              style="
                outline: none;
                cursor: pointer;
                border: 0px;
                padding: 0;
                margin: 0;
                vertical-align: middle;
              "
              height="30px"
              width="30px"
            >
              <img src="../../assets/home/search.png" />
            </button>

            <!-- <input width="30" height="29" type="image" src="https://jxxy.xust.edu.cn/images/search.png" value="搜 索" style="outline: none;vertical-align: middle;"> -->
          </div>
        </el-col>
      </el-row>
    </div>

    <!--第二部分-->
    <div class="parttwo">
      <el-row>
        <el-col :span="24">
          <el-menu
            :default-active="activeIndex"
            class="el-menu-demo"
            mode="horizontal"
            @select="handleSelect"
            background-color="#0066FF"
            text-color="#fff"
            active-text-color="#ffd04b"
            width="100%"
            style="align: center"
            router
          >
            <el-menu-item index="/home">首页</el-menu-item>
            <component
              class="menu-item"
              v-for="value in boardList"
              :key="value.id"
              :index="value.menuId + ''"
              :route="value.url + value.menuId+''"
              :is="
                value.children && value.children.length > 0
                  ? 'el-submenu'
                  : 'el-menu-item'
              "
            >
              <template slot="title">
                <span> {{value.menuName}}</span>
              </template>
              <template v-if="value.children && value.children.length > 0">
                <el-menu-item
                  class="menu-item"
                  v-for="(v, i) in value.children"
                  :key="v.url + i"
                  :index="v.id + v.menuName"
                  :route="v.url+v.menuId+''"
                >
                  <span slot="title">{{ v.menuName }}</span>
                </el-menu-item>
              </template>
            </component>

            <!-- <el-submenu index="2">
              <template slot="title">学院概况</template>
              <el-menu-item index="/introduction/学院简介">学院简介</el-menu-item>
              <el-menu-item index="/introduction/党政领导">党政领导</el-menu-item>
              <el-menu-item index="/introduction/机构设置">机构设置</el-menu-item>
            </el-submenu>
            <el-submenu index="3">
              <template slot="title">师资队伍</template>
              <el-menu-item index="3-1">师资概况</el-menu-item>
              <el-menu-item index="3-2">教授</el-menu-item>
              <el-menu-item index="3-3">副教授</el-menu-item>
            </el-submenu>
            <el-submenu index="4">
              <template slot="title">教学研究</template>
              <el-menu-item index="4-1">教务办公流程</el-menu-item>
              <el-menu-item index="4-2">管理制度</el-menu-item>
              <el-menu-item index="4-3">教学成果</el-menu-item>
              <el-menu-item index="4-3">在线资源</el-menu-item>
            </el-submenu>
            <el-submenu index="5">
              <template slot="title">科学研究</template>
              <el-menu-item index="5-1">科研信息</el-menu-item>
              <el-menu-item index="5-2">研究成果</el-menu-item>
              <el-menu-item index="5-3">团队建设</el-menu-item>
            </el-submenu>
            <el-submenu index="6">
              <template slot="title">学生培养</template>
              <el-submenu index="6-1">
                <template slot="title">本科生培养</template>
                <el-menu-item index="6-1-1">培养制度</el-menu-item>
                <el-menu-item index="6-1-2">专业简介</el-menu-item>
                <el-menu-item index="6-1-3">培养计划</el-menu-item>
                <el-menu-item index="6-1-4">课程简介</el-menu-item>
              </el-submenu>
              <el-submenu index="6-2">
                <template slot="title">研究生培养</template>
                <el-menu-item index="6-2-1">硕士点简介</el-menu-item>
                <el-menu-item index="6-2-2">培养方案</el-menu-item>
                <el-menu-item index="6-2-3">博士生导师</el-menu-item>
                <el-menu-item index="6-2-4">硕士生导师</el-menu-item>
                <el-menu-item index="6-2-5">培养制度</el-menu-item>
              </el-submenu>
            </el-submenu>
            <el-submenu index="7">
              <template slot="title">杰出校友</template>
              <el-menu-item index="7-1">杰出校友</el-menu-item>
            </el-submenu>
            <el-submenu index="8">
              <template slot="title">招生就业</template>
              <el-menu-item index="8-1">招生信息</el-menu-item>
              <el-menu-item index="8-2">就业信息</el-menu-item>
            </el-submenu>
            <el-submenu index="9">
              <template slot="title">资料下载</template>
              <el-menu-item index="9-1">教学资料</el-menu-item>
              <el-menu-item index="9-2">科研资料</el-menu-item>
              <el-menu-item index="9-3">学工资料</el-menu-item>
              <el-menu-item index="9-4">其他资料</el-menu-item>
            </el-submenu>
            <el-submenu index="10">
              <template slot="title">实验室建设</template>
              <el-menu-item index="10-1">物理实验室</el-menu-item>
              <el-menu-item index="10-2">力学实验室</el-menu-item>
              <el-menu-item index="10-3">数学实验室</el-menu-item>
              <el-menu-item index="10-4">图形图像实验室</el-menu-item>
            </el-submenu>
            <el-submenu index="11">
              <template slot="title">党建工作</template>
              <el-menu-item index="11-1">党员活动</el-menu-item>
              <el-menu-item index="11-2">组织结构</el-menu-item>
              <el-menu-item index="11-3">理论学习</el-menu-item>
              <el-menu-item index="11-4">党员风采</el-menu-item>
            </el-submenu>
            <el-submenu index="12">
              <template slot="title">学生工作</template>
              <el-menu-item index="12-1" style="width: 116px"
                >学工动态</el-menu-item
              >
              <el-menu-item index="12-2" style="width: 116px"
                >学工队伍</el-menu-item
              >
              <el-menu-item index="12-3" style="width: 116px"
                >学生党建</el-menu-item
              >
              <el-menu-item index="12-4" style="width: 116px"
                >团委学生会</el-menu-item
              >
              <el-menu-item index="12-5" style="width: 116px"
                >学生资助</el-menu-item
              >
              <el-menu-item index="12-6" style="width: 116px"
                >规章制度</el-menu-item
              >
            </el-submenu> -->
          </el-menu>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { boardList } from "@/api/header";
export default {
  data() {
    return {
      boardList: [],
      //轮播图
      imgList: [
        { id: 0, idView: require("../../assets/home/index01.jpg") },
        { id: 1, idView: require("../../assets/home/index02.jpg") },
        { id: 2, idView: require("../../assets/home/index03.jpg") },
        { id: 3, idView: require("../../assets/home/index04.jpg") },
      ],
      // 图片父容器高度
      bannerHeight: 1000,
      // 浏览器宽度
      screenWidth: 0,
      activeIndex: "1",
      //搜索帖子
      query: "",
    };
  },
  methods: {
    //搜索
    searchList() {
      console.log("搜索内容："+this.query);
      this.$router.push({
          path: "/search",
          query: {
            query: this.query
          }
        });
      // this.$emit('searchClick',this.query)
    },


    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },

    //获取菜单
    async getBoardList() {
      const { data: res } = await boardList();
      this.boardList = res.data.boardList;
    },
  },
  created() {
    this.getBoardList();
  },
  mounted() {},
};
</script>

<style scoped>
</style>